<template>
  <div>
	
	<myheader></myheader>

	<br>
		<!-- 面包屑导航 -->
		<Breadcrumb :datas='datas'></Breadcrumb>
	<section class="featured-block text-center">
		<div class="container">
			
			<table>
				<!-- 用户名输入框 -->
				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						用户名 :
					</td>
					<td style='padding: 5px;'>
						<input type="text" name="" id="" v-model='username'>
					</td>
				</tr>
				<!-- 密码输s入框 -->
				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						密&nbsp;&nbsp;&nbsp;码 :
					</td>
					<td style='padding: 5px;'>
						<input type="password" name="" id="" v-model='password'>
					</td>
				</tr>
				<!-- 验证码输入框 -->
				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>
						验证码 :
					</td>
					<td style='padding: 5px;'>
						<input type="text" name="" id="" v-model='code'>
					</td>
				</tr>
				<!-- 验证码图片 -->
				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>

					</td>
					<td style='padding: 5px;'>
						<img :src="src" alt="" @click="changeimg">
					</td>
				</tr>
				<tr style='padding: 5px;'>
					<td style='padding: 5px;'>

					</td>
					<td style='padding: 5px;'>
						<Button @click='submit'>注册</Button>&nbsp;&nbsp;
						<Button color='green' @click="reset">重置</Button>
					</td>
				</tr>

			</table>

		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

import {config} from '../config.js';


export default {
  data () {
    return {
	  msg: "这是一个变量",
	  //声明面包屑变量
	  datas:[{title:'首页',route:{name:'index'}},{title:'注册页面'}],
	  username:'',
	  password:'',
	  code:'',
	  src: config['after_end']+ '/mycode/',
    }
  },

  //注册组件标签
  components:{
	'myheader': myheader,
	'myfooter': myfooter,

  },

  mounted:function(){

   
  
},
  methods:{
	  //提交注册
	  submit:function(){
		  //判断用户名非空
		  if (this.username == ""){
			//   alert('用户名不能为空');4
			this.$Message("用户名不能为空")
			  return false;
		  }
		  //判断密码非空
		  if (this.password == ""){
			//   alert('密码不能为空');4
			this.$Message("密码不能为空")
			  return false;
		  }

		  //向后端发送请求
		  this.axios.get(config['after_end'] + '/register/',{params:{username:this.username,password:this.password,code:this.code}}).then((result)=>{
			  //打印接口返回值
			  console.log(result)
			  //提醒用户已注册成功
			  this.$Message(result.data.message)


		  })

	  },
	  //重置
	  reset:function(){
		  this.username = '',
		  this.password = ''

		  this.$Message('重置成功')
	  },
	  //刷新验证码
	  changeimg:function(){
		  //生成随机字符串
		  var num = Math.ceil(Math.random()*100);
		  //赋值地址
		  this.src = this.src + '?mycode=' + num; 

		  //session验证码保存
		  


	  },

     
  }
}


</script>
 
<style>



</style>